<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <title>集成监控平台</title>
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <link href="/monitor/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">-->
    <link href="/monitor/bower_components/Ionicons/css/ionicons.min.css" rel="stylesheet">
    <link href="/monitor/dist/css/AdminLTE.min.css" rel="stylesheet">
    <link href="/monitor/dist/css/skins/_all-skins.min.css" rel="stylesheet">
    <link href="/monitor/dist/css/theme-chalk/index.css" rel="stylesheet">
    <link href="/monitor/toast/toastr.min.css" rel="stylesheet">
    <link href="/monitor/sweetalert2/bootstrap-4.min.css" rel="stylesheet">

    <link href="/monitor/dist/img/log.png" rel="shortcut icon"/>
    <script src="/monitor/bower_components/vue/js/html5shiv.min.js"></script>
    <script src="/monitor/bower_components/vue/js/respond.min.js"></script>
    <script src="/monitor/bower_components/vue/js/vue.js"></script>
    <script src="/monitor/bower_components/vue/js/vue-resource.js"></script>
    <script src="/monitor/bower_components/vue/js/index.js"></script>
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper" id="integrationReceiptVo">

    <header class="main-header">
        <a class="logo" href="index.html">
            <span class="logo-lg"><b>中台集成</b>监控</span>
        </a>
        <nav class="navbar navbar-static-top">
            <a class="sidebar-toggle" data-toggle="push-menu" href="#" role="button">
                <span class="sr-only">Toggle navigation</span>
            </a>
        </nav>
    </header>

    <aside class="main-sidebar">
        <section class="sidebar">
            <div class="user-panel">
                <div class="pull-left image">
                    <img alt="User Image" class="img-circle" src="/monitor/dist/img/user2-160x160.jpg">
                </div>
                <div class="pull-left info">
                    <p>admin</p>
                    <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
                </div>
            </div>
            <ul class="sidebar-menu" data-widget="tree">

                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-table"></i> <span>单据同步</span>
                        <span class="pull-right-container">
                          <i class="fa fa-angle-left pull-right"></i>
                        </span>
                    </a>
                    <ul class="treeview-menu">
                        <li><a href="/monitor/pages/receipt_note.html"><i class="fa fa-circle-o"></i> 单据 </a></li>
                    </ul>
                </li>

                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-table"></i> <span>主档同步</span>
                        <span class="pull-right-container">
                          <i class="fa fa-angle-left pull-right"></i>
                        </span>
                    </a>
                    <ul class="treeview-menu">
                        <!--                        <li><a href="/monitor/pages/meta_data_batch.html"><i class="fa fa-circle-o"></i>主档批次</a></li>-->
                        <li><a href="/monitor/pages/meta_data_entity.html"><i class="fa fa-circle-o"></i>主档详情</a>
                        </li>
                        <li><a href="/monitor/pages/meta_data_entity_relation.html"><i class="fa fa-circle-o"></i>主档附录(relation)详情</a>
                        </li>
                    </ul>
                </li>
                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-table"></i> <span>销售数据同步</span>
                        <span class="pull-right-container">
                          <i class="fa fa-angle-left pull-right"></i>
                        </span>
                    </a>
                    <ul class="treeview-menu">
                        <li><a href="/monitor/pages/trans_code_info.html"><i class="fa fa-circle-o"></i>【物料转换】汇总
                        </a></li>
                        <li><a href="/monitor/pages/sale_store_info.html"><i class="fa fa-circle-o"></i>【门店信息】汇总
                        </a></li>
                        <li><a href="/monitor/pages/pre_sale_total.html"><i class="fa fa-circle-o"></i>【销售预处理】汇总
                        </a></li>
                        <li><a href="/monitor/pages/sale_total.html"><i class="fa fa-circle-o"></i>【销售】汇总 </a></li>
                        <li><a href="/monitor/pages/pay_total.html"><i class="fa fa-circle-o"></i>【支付】汇总 </a></li>
                    </ul>
                </li>
                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-table"></i> <span>推送日志</span>
                        <span class="pull-right-container">
                          <i class="fa fa-angle-left pull-right"></i>
                        </span>
                    </a>
                    <ul class="treeview-menu">
                        <li><a href="/monitor/pages/third_party_log.html"><i class="fa fa-circle-o"></i>三方日志</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </section>
    </aside>

    <div class="content-wrapper" style="min-height: 921px;">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                中台集成监控 <small>INTEGRATION</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 中台集成监控 </a></li>
                <li><a href="#">中台集成监控</a></li>
                <li class="active">消息</li>
            </ol>
        </section>

        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-header">
                            <h3 class="box-title">租户月结门店信息数据</h3>
                        </div>
                        <div class="box-body">
                            <div class="dataTables_wrapper form-inline dt-bootstrap" id="receipt_wrapper">
                                <div class="row">
                                    <div class="col-lg-3">
                                        <div class="dataTables_filter" id="store_code">
                                            <label>门店编码： <input aria-controls="example1"
                                                                    class="form-control input-sm"
                                                                    id="store-code"
                                                                    placeholder="请输入门店编码" type="search"></label>
                                        </div>
                                    </div>
                                    <div class="col-lg-2">
                                        <button class="btn btn-danger btn-sm" data-target="#modal-add"
                                                data-toggle="modal"
                                                type="button">新增
                                        </button>
                                        <button @click="search" class="btn btn-warning btn-sm" type="button">搜索🔍
                                        </button>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <table aria-describedby="receipt_info"
                                               class="table table-bordered table-hover dataTable"
                                               id="integrationReceiptVo-table" role="grid">
                                            <thead>
                                            <tr role="row">
<!--                                                <th>序号id</th>-->
                                                <th>租户</th>
                                                <th>门店id</th>
                                                <th>门店编码</th>
                                                <th>门店名称</th>
                                                <th>门店地址</th>
                                                <th>创建时间</th>
                                                <th>更新时间</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <template v-for="data in tableData">
                                                <tr role="row">
<!--                                                    <td>{{ data.id }}</td>-->
                                                    <!--                                                    <td>{{ partnerIds[data.partnerId] }}</td>-->
                                                    <td>{{ data.partnerId}}</td>
                                                    <td>{{ data.storeId }}</td>
                                                    <td>{{ data.storeCode }}</td>
                                                    <td>{{ data.storeName }}</td>
                                                    <td>{{ data.address }}</td>
                                                    <td>{{ data.createTime }}</td>
                                                    <td>{{ data.updateTime }}</td>
                                                </tr>
                                            </template>
                                        </table>

                                        <div align="center">
                                            <el-pagination
                                                    :current-page="currentPage"
                                                    :page-size="pageSize"
                                                    :page-sizes="[10, 20, 30, 40]"
                                                    :total="totalCount"
                                                    @current-change="handleCurrentChange"
                                                    @size-change="handleSizeChange"
                                                    layout="total, sizes, prev, pager, next, jumper">
                                            </el-pagination>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>
    </div>

    <footer class="main-footer">
        <div class="pull-right hidden-xs">
            <b>Version</b> 2.4.0
        </div>
        <strong>Copyright &copy; 2019-2022 <a href="https://adminlte.io">上海合阔智云信息技术有限公司</a>.</strong> All
        rights
        reserved.
    </footer>

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Create the tabs -->
        <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
            <li><a data-toggle="tab" href="#control-sidebar-home-tab"><i class="fa fa-home"></i></a></li>
            <li><a data-toggle="tab" href="#control-sidebar-settings-tab"><i class="fa fa-gears"></i></a></li>
        </ul>
    </aside>

    <div class="control-sidebar-bg"></div>

    <div class="modal fade" id="modal-json">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button aria-label="Close" class="close" data-dismiss="modal" type="button">
                        <span aria-hidden="true">×</span></button>
                    <h5 class="modal-title">[{{title}}] {{keyWord}}</h5>
                </div>
                <div class="modal-body">
                    <pre>{{ detail }}</pre>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" data-dismiss="modal" type="button">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <!--新增-->
    <div aria-hidden="true" class="modal fade" id="modal-add">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <!--                    <h4 class="modal-title">月结门店信息</h4>-->
                    <button aria-label="Close" class="close" data-dismiss="modal" type="button">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="card-body">

                        <!--                        <div class="form-group">-->
                        <!--                            <label>租户:</label>-->
                        <!--                            <select aria-controls="order-control"-->
                        <!--                                    class="form-control input-sm" id="add-partnerId">-->
                        <!--                                <option value="">请选择租户</option>-->
                        <!--                                <option :value="val" v-for="(name, val) in partnerIds">{{name}}</option>-->
                        <!--                            </select>-->
                        <!--                        </div>-->

                        <div class="form-group">
                            <label>门店编码:</label>
                            <div class="input-group" data-target-input="nearest">
                                <input class="form-control datetimepicker-input" id="add-store-code" type="text">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button class="btn btn-default" data-dismiss="modal" type="button">关闭</button>
                    <button @click="handleAdd()" class="btn btn-primary" data-dismiss="modal" type="button">新增
                    </button>
                </div>
            </div>
        </div>
    </div>

</div>

<script src="/monitor/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/monitor/bower_components/jquery/dist/jquery.format.js"></script>
<script src="/monitor/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/monitor/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="/monitor/bower_components/fastclick/lib/fastclick.js"></script>
<script src="/monitor/dist/js/adminlte.min.js"></script>
<script src="/monitor/dist/js/demo.js"></script>
<script src="/monitor/dist/js/main.js"></script>
<script src="/monitor/toast/toastr.min.js"></script>
<script src="/monitor/sweetalert2/sweetalert2.min.js"></script>

<script>
    var vue = new Vue({
        el: "#integrationReceiptVo",
        data: {
            //表格当前页数据
            totalData: [],
            //表格当前页数据
            tableData: [],
            //请求的URL
            url: 'api/v2/admin/receipt/query',
            //默认每页数据量
            pageSize: 10,
            //当前页码
            currentPage: 1,
            //查询的页码
            start: 1,
            //默认数据总数
            totalCount: 1000,
            //添加对话框默认可见性
            dialogVisible: false,
            // 序号ID
            id: '',
            // 单据类型
            type: '',
            // 标题
            title: '',
            // 关键字
            keyWord: '',
            // 报文
            detail: {},
            payload: '',
            records: '',
            partnerIds: {"441": "久久丫", "436": "留夫鸭", "431": "佳门口"}
        },
        mounted: function () {
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000
            });
        },
        methods: {
            //从服务器读取数据[含keyword]
            loadData: function (pageNum, pageSize, storeCode) {

                let url = '/api/v2/admin/month/store/query';
                var data = {"pageNum": pageNum, "pageSize": pageSize};
                if (!(typeof (storeCode) == "undefined" || storeCode === "")) {
                    data.storeCode = storeCode;
                }
                var headers = {"Content-Type": "application/json"};
                this.$http.post(url, data, headers).then(function (res) {
                    console.log(res);
                    if (res.body.status_code === 200) {
                        this.tableData = res.body.payload.records;
                        this.totalCount = res.body.payload.total;
                    } else {
                        console.log(res.body.description);
                        // window.location.href = 'login.html';
                    }
                }, function () {
                    console.log('failed');
                    //window.location.href = 'login.html';
                });
            },


            // 查看明细数据
            handleJsonDetail: function (id, title, type, content, keyWord) {
                this.id = id;
                this.title = title;
                this.type = type;
                this.keyWord = keyWord;
                const result = this.isJson(content);
                if (result) {
                    this.detail = JSON.stringify(JSON.parse(content), null, 4);
                } else {
                    this.detail = JSON.stringify(content, null, 4);
                }
            },
            isJson: function (str) {
                if (typeof str == 'string') {
                    try {
                        const obj = JSON.parse(str);
                        if (typeof obj == 'object' && obj) {
                            return true;
                        } else {
                            return false;
                        }
                    } catch (e) {
                        console.log('error：' + str + '!!!' + e);
                        return false;
                    }
                }
                console.log('It is not a string!')
            },
            //每页显示数据量变更
            handleSizeChange: function (val) {
                var storeCode = $("#store-code").val();
                var sendStatus = $("#send-status").val();
                var sendDate = $("#send-date").val();
                this.pageSize = val;
                this.loadData(this.currentPage, this.pageSize, storeCode, sendDate, sendStatus);
            },
            //页码变更
            handleCurrentChange: function (val) {
                var storeCode = $("#store-code").val();
                var sendStatus = $("#send-status").val();
                var sendDate = $("#send-date").val();
                this.currentPage = val;
                this.loadData(this.currentPage, this.pageSize, storeCode, sendDate, sendStatus);
            },
            // 数据新增
            handleAdd: function () {
                var url = '/api/v2/admin/month/store/add'
                var headers = {"Content-Type": "application/json"}
                var data = {}
                // data.partnerId = $("#add-partnerId").val()
                data.storeCode = $("#add-store-code").val()
                this.$http.post(url, data, headers).then(function (res) {
                    var storeCode = data.storeCode
                    var code = res.body.code
                    if (code == "200") {
                        var title = "门店: " + storeCode
                        var message = "新增操作：" +  res.body.description
                        toastr.success(title + message);
                    } else {
                        var title = "门店: " + storeCode
                        var message = "新增发生异常：：" +  res.body.description
                        toastr.warning(title + message);
                    }
                    this.loadData();
                }, function (err) {
                    var title = "门店: " + storeCode
                    var message = "新增发生异常：：" + err.description
                    toastr.warning(title + message);
                })
            },
            // 搜索
            search: function () {
                var storeCode = $("#store-code").val();
                this.loadData(this.currentPage, this.pageSize, storeCode);
            }
        },
    });
    //载入数据
    vue.loadData(vue.currentPage, vue.pageSize);
</script>
</body>
</html>
